*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.box{
    border: 2px solid red;
}
.box>p{
    font-size: 24px;
    text-align: center;
}
.cardBox{
    display: flex;
}
.card{
    width: 50px;
    height: 100px;
    border: 1px solid black;
    border-radius: 5px;
    position: relative;
    margin: 0 5px;
    background-size: 30px 30px;
    background-position: center;
    background-repeat: no-repeat;
}

.card .type{
    font-size: 12px;
}
.rightBottom{
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(180deg);
}
/* 黑桃 */
.Spades{
    background-image: url("./黑桃.png");
  

}
/* 红桃 */
.hearts{
    background-image: url("./红桃.png");
    color: red;
}

/* 梅花 */
.Plum{
    background-image: url("./梅花.png");

}

/* 方片 */
.Square{
    background-image: url("./方块.png");
    color: red;

}